<div class="meeting-add">
    <form class="layui-form" action="" autocomplete="off">
        <input type="hidden" name="id" value="{$meeting.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">会议名称</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="title" placeholder="会议名称" value="{$meeting.title}" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">主要议题</label>
            <div class="layui-input-block">
                <textarea name="content" placeholder="会议主要议题" lay-verify="required" class="layui-textarea">{$meeting.content}</textarea>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">会议开始时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="start_time" class="layui-input start" lay-verify="required" value="{$meeting.start_time}" readonly placeholder="开始时间">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">会议主持人</label>
                    <div class="layui-input-block">
                        <select name="host" lay-search lay-verify="required" lay-filter="host">
                            <option value=""></option>
                            <volist name="users" id="user">
                                <option value="{$user.id}" <eq name="meeting.host" value="$user.id">selected</eq>>{$user.nickname}</option>
                            </volist>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">会议结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="end_time" class="layui-input end" lay-verify="required" value="{$meeting.end_time}" readonly placeholder="结束时间">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">会议纪要员</label>
                    <div class="layui-input-block">
                        <select name="recorder" lay-search lay-verify="required" lay-filter="recorder">
                            <option value=""></option>
                            <volist name="users" id="user">
                                <option value="{$user.id}" <eq name="meeting.recorder" value="$user.id">selected</eq>>{$user.nickname}</option>
                            </volist>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">参会人员</label>
            <div class="layui-input-block ">
                <select name="participants" xm-select="participants" xm-select-show-count="7" xm-select-search lay-verify="required">
                    <option value=""></option>
                    <volist name="users" id="user">
                        <option value="{$user.id}" <in name="user.id" value="$meeting.participants">selected</in>>{$user.nickname}</option>
                    </volist>
                </select>
            </div>
        </div>

        <div class="layui-form-item mb-5">
            <label class="layui-form-label">会议室选择</label>
            <div class="layui-input-block">
                <select name="meeting_room_id" xm-select="meetingRoom" xm-select-show-count="4" xm-select-search lay-verify="required" lay-filter="room">
                    <option value=""></option>
                    <volist name="rooms" id="room">
                        <option value="{$room.id}" <in name="room.id" value="$meeting.meeting_room_id">selected</in>>{$room.name}</option>
                    </volist>
                </select>
            </div>
        </div>

        <!-- 会议室选择后的信息展示 start-->
        <div id="show">
            <div>
                <notempty name="meeting.datas">
                    <volist name="meeting.datas" id="data">
                        <div class="layui-input-block layui-pic" id="{$data.id}">
                            <div class="pic">
                                <img src="{$data.pic}" alt="会议室的图片">
                                <div class="detail clearfix">
                                    <div class="pull-left">
                                        <p>名称</p>
                                        <p>座位</p>
                                        <p>类型</p>
                                        <p>地点</p>
                                    </div>
                                    <div class="pull-right">
                                        <p>{$data.name}</p>
                                        <p>{$data.seats}</p>
                                        <p>{$data.type}</p>
                                        <p>{$data.location}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="tip clearfix">
                                <div class="pull-left">
                                    <span class="num">{:count($data['details'])}</span>
                                    <span>个预约</span>
                                </div>
                                <div class="pull-right">
                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger look">查看</button>
                                </div>
                            </div>
                            <table class="table" style="display: none">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>会议名称</th>
                                        <th>会议申请人</th>
                                        <th>会议时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <notempty name="data.details">
                                        <volist name="data.details" id="detail" key="k">
                                            <tr>
                                                <td>{$k}</td>
                                                <td>{$detail.title}</td>
                                                <td>{$detail.user.author_name}</td>
                                                <td>{$detail.start_time} 至 {$detail.end_time}</td>
                                            </tr>
                                        </volist>
                                        <else/>
                                        <td colspan="4" class="text-center text-muted">暂无预约信息</td>
                                    </notempty>
                                </tbody>
                            </table>
                        </div>
                    </volist>
                </notempty>
            </div>
        </div>
        <!-- 会议室选择后的信息展示 end-->

        <div class="layui-form-item mt-10">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="会议备注" class="layui-textarea">{$meeting.remark}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">相关附件</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-primary" id="file">
                    <i class="layui-icon">&#xe67c;</i>上传附件
                </button>
                <div class="mr-pv">
                    <volist name="meeting.meeting_files" id="file" key="k">
                        <div class="clearfix files">
                            <div class="pull-left">
                                <i class="file-icon file-icon-ext-{$file.ext}"></i>
                                {$file.name}
                                <input type="hidden" name="files[{$k}][path]" value="{$file.path}">
                                <input type="hidden" name="files[{$k}][ext]" value="{$file.ext}">
                                <input type="hidden" name="files[{$k}][name]" value="{$file.name}">
                            </div>
                            <div class="pull-right">
                                <span><i class="icon-remove"></i></span>
                            </div>
                        </div>
                    </volist>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="save">保存</button>
                <a href="javascript:history.back(-1)" class="layui-btn layui-btn-primary">取消</a>
            </div>
        </div>
    </form>
</div>

<script>
    $(function () {
        layui.config({
            base: '/Public/'
        }).extend({
            formSelects: 'layui-formSelects/src/formSelects-v4'
        });

        layui.use(['form','formSelects','upload'],function () {
            var form = layui.form,
                formSelects = layui.formSelects,
                upload = layui.upload;

            //开始时间结束时间
            $(".start").datetimepicker({
                language: 'zh-CN',
                format: 'yyyy-mm-dd hh:ii',
                todayBtn:  true,
                autoclose: true,
                todayHighlight: true,
                startDate: new Date()
            }).on('change',function (ev) {
                $(".end").datetimepicker('setStartDate', $(".start").val());
            });
            $(".end").datetimepicker({
                language: 'zh-CN',
                format: 'yyyy-mm-dd hh:ii',
                todayBtn: true,
                autoclose: true,
                todayHighlight: true,
                startDate: new Date()
            }).on('change', function (ev) {
                $(".start").datetimepicker('setEndDate', $(".end").val());
            });

            //监听主持人、纪要员、参会人员，保证参会人员至少包含主持人和纪要员
            var host,recorder;
            form.on('select(host)' ,function (data) {
                if (host !== data.value) {
                    layui.formSelects.value('participants', [host], false); //发生变化删除原有的
                    host = data.value;
                    layui.formSelects.value('participants', [host], true); //追加赋值
                    layui.formSelects.value('participants', [recorder], true); //防止两个先选择一样的再修改后的显示选中bug
                }
            });
            form.on('select(recorder)' ,function (data) {
                if (recorder !== data.value) {
                    layui.formSelects.value('participants', [recorder], false); //发生变化删除原有的
                    recorder = data.value;
                    layui.formSelects.value('participants', [recorder], true); //追加赋值
                    layui.formSelects.value('participants', [host], true); //防止两个先选择一样的再修改后的显示选中bug
                }
            });
            formSelects.on('participants', function(id, vals, val, isAdd, isDisabled){
                //val:          当前select点击的值
                //isAdd:        当前操作选中or取消

                //清空主持人和纪要员的数据
                if (val.value === host && isAdd === false) {
                    host = '';
                    $('select[name=host]').val('');
                    $('select[name=host]').next().find('input').val('');
                }
                if (val.value === recorder && isAdd === false) {
                    recorder = '';
                    $('select[name=recorder]').val('');
                    $('select[name=recorder]').next().find('input').val('');
                }
            }, true);

            var meeting_id = $("input[name=id]").val();
            //监听会议室的选择，展示出对应的会议室信息
            formSelects.on('meetingRoom', function(id, vals, val, isAdd, isDisabled){
                //data获取当前选中room的id
                var dataId = [];
                for (var i = 0; i<vals.length; i++) {
                    dataId[i] = vals[i].value
                }
                var data = {id: dataId,meeting_id: meeting_id};
                $.post("/meetings/meetingRoomShow", data, function (response) {
                    if (response.code) {
                        layer.alert(response.msg, {icon: 2, title: "错误提示"});
                    } else {
                        //获取到会议室信息数据并循环展现到页面
                        var data = response.data;
                        // 初始化html代码
                        $("#show").html('<div></div>');
                        if (data.length > 0) {
                            for (var i = 0 ;i < data.length ; i++) {
                                $("#show").children().append(
                                    '<div class="layui-input-block layui-pic" id="'+data[i].id+'">\n' +
                                    '                    <div class="pic">\n' +
                                    '                        <img src="'+data[i].pic+'" alt="会议室的图片">\n' +
                                    '                        <div class="detail clearfix">\n' +
                                    '                            <div class="pull-left">\n' +
                                    '                                <p>名称</p>\n' +
                                    '                                <p>座位</p>\n' +
                                    '                                <p>类型</p>\n' +
                                    '                                <p>地点</p>\n' +
                                    '                            </div>\n' +
                                    '                            <div class="pull-right">\n' +
                                    '                                <p>'+data[i].name+'</p>\n' +
                                    '                                <p>'+data[i].seats+'</p>\n' +
                                    '                                <p>'+data[i].type+'</p>\n' +
                                    '                                <p>'+data[i].location+'</p>\n' +
                                    '                            </div>\n' +
                                    '                        </div>\n' +
                                    '                    </div>\n' +
                                    '                    <div class="tip clearfix">\n' +
                                    '                        <div class="pull-left">\n' +
                                    '                            <span class="num">0</span>\n' +
                                    '                            <span>个预约</span>\n' +
                                    '                        </div>\n' +
                                    '                        <div class="pull-right">\n' +
                                    '                            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger look">查看</button>\n' +
                                    '                        </div>\n' +
                                    '                    </div>\n' +
                                    '                <table class="table" style="display: none">\n' +
                                    '                    <thead>\n' +
                                    '                        <tr>\n' +
                                    '                            <th>序号</th>\n' +
                                    '                            <th>会议名称</th>\n' +
                                    '                            <th>会议申请人</th>\n' +
                                    '                            <th>会议时间</th>\n' +
                                    '                        </tr>\n' +
                                    '                    </thead>\n' +
                                    '                    <tbody>\n' +
                                    '                    </tbody>\n' +
                                    '                </table>\n' +
                                    '                </div>'
                                );
                                if (data[i].details.length > 0) {
                                    $("#"+data[i].id).find("span.num").text(data[i].details.length);
                                    for (var j = 0; j < data[i].details.length; j++) {
                                        $("#"+data[i].id).find("tbody").append(
                                            '<tr>\n' +
                                            '     <td>'+(j+1)+'</td>\n' +
                                            '     <td>'+data[i].details[j].title+'</td>\n' +
                                            '     <td>'+data[i].details[j].user.author_name+'</td>\n' +
                                            '     <td>'+data[i].details[j].start_time+' 至 '+data[i].details[j].end_time+'</td>\n' +
                                            '</tr>'
                                        );
                                    }
                                } else {
                                    $("#"+data[i].id).find("tbody").html(
                                        '<tr>\n' +
                                        '     <td colspan="4" class="text-muted text-center">暂无预约信息</td>\n' +
                                        '</tr>'
                                    );
                                }
                            }
                        }

                    }
                }, 'json');

            }, true);

            //点击查看弹出该会议室信息的弹窗
            $(document).on('click', '#show .look', function () {
                var html = $(this).parents(".layui-pic").find(".table");
                layer.open({
                    type: 1,
                    title: '查看预约',
                    area: ['600px', '300px'],//弹出框大小
                    content: html,
                    closeBtn: 2,
                    shadeClose: true
                })
            });

            //上传附件
            var index = $('.mr-pv .files').length+1;
            upload.render({
                elem: '#file',
                url: '/meetings/uploadFiles',
                exts: 'zip|rar|png|jpg|jpeg|doc|xls|gif|xlsx|docx|pdf',
                multiple: true, //可多选
                done: function(response) {
                    if (response.code) {
                        layer.alert(response.msg, {icon: 2, title: "错误提示"});
                    } else {
                        var item = this.item;  //获取当前触发上传的元素
                        var data = response.data;
                        $(item).parents('.layui-input-block').children('.mr-pv').append(
                            '<div class="clearfix files">\n' +
                            '     <div class="pull-left">\n' +
                            '          <i class="file-icon file-icon-ext-'+data.ext+'"></i>\n' +
                            '          '+data.name+'\n' +
                            '          <input type="hidden" name="files['+index+'][path]" value="'+data.path+'">\n' +
                            '          <input type="hidden" name="files['+index+'][ext]" value="'+data.ext+'">\n' +
                            '          <input type="hidden" name="files['+index+'][savename]" value="'+data.savename+'">\n' +
                            '          <input type="hidden" name="files['+index+'][name]" value="'+data.name+'">\n' +
                            '     </div>\n' +
                            '     <div class="pull-right">\n' +
                            '          <span><i class="icon-remove"></i></span>\n' +
                            '     </div>\n' +
                            '</div>'
                        );
                        index++;
                    }
                }
            });
            //移除附件
            $(document).on('click', '.mr-pv .files span', function () {
                var _this = $(this);
                layer.confirm('确定要删除该附件吗？', {icon: 3, title: '提示'}, function (index) {
                    _this.parents('.files').remove();
                    layer.close(index);
                });
            });

            //保存会议
            form.on('submit(save)', function (data) {
                //加载
                var load = layer.load(2, {shade: [0.5, '#fff']});

                var start = data.field.start_time,
                    end = data.field.end_time;
                //结束日期必须大于开始日期
                if (start > end) {
                    layer.close(load);
                    layer.alert('结束时间必须大于开始时间！', {icon: 2, title: "错误提示"});
                    return false;
                }

                //开始日期结束日期必须在同一天
                if (start.split(' ')[0] !== end.split(' ')[0]) {
                    layer.close(load);
                    layer.alert('开始时间和结束时间必须在同一天内！', {icon: 2, title: "错误提示"});
                    return false;
                }

                $.post("/meetings/meetingStore", data.field, function (response) {
                    layer.close(load);
                    if (response.code) {
                        layer.alert(response.msg, {icon: 2, title: "错误提示"});
                    } else {
                        //跳转到我的会议页面
                        location.href = '/meetings/show?id=' + response.data.id;
                    }
                }, 'json');
            })


        })
    })
</script>